<template>
  <grid-layout 
    :layout.sync="layout"
    :col-num="colNum"
    :row-height="rowHeight"
    :is-draggable="editable"
    :is-resizable="editable"
    :vertical-compact="true"
    :use-css-transforms="true"
    class="bi-layout"
    >
    <grid-item v-for="(item,index) in layout" :key="index"
      :static="!editable"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :style="{'touch-action': 'none'}"
    >
      <bi-label v-if="item.i=='1.0'" :items="labels"></bi-label>
      <bi-wapper v-else-if="item.i=='1.1'" class="p-10px">
        <bi-table class="w-100 h-100" :columns="tableColumn" :data="tableData"></bi-table>
      </bi-wapper>
      <bi-wapper v-else-if="item.i=='1.2'" class="p-10px">
        <bi-list class="w-100 h-100" :items="list"></bi-list>
      </bi-wapper>

      <bi-kpi v-else-if="item.i=='2.0.1'" :title="'abc'" :value="'123'" class="bi-empty-block"></bi-kpi>
      <bi-circle v-else-if="item.i=='2.0.2'" :items="circles"></bi-circle>
      <bi-wapper v-else-if="item.i=='2.1'" class="p-10px">
        <starChart class="w-100 h-100" :options="sandyOptions"></starChart>
      </bi-wapper>
      <bi-wapper v-else-if="item.i=='2.2.1'" class="p-10px">
        <starChart class="w-100 h-100" :options="chartOptions1"></starChart>
      </bi-wapper>
      <bi-wapper v-else-if="item.i=='2.2.2'" class="p-10px">
        <starChart class="w-100 h-100" :options="chartOptions2"></starChart>
      </bi-wapper>

      <bi-wapper v-else-if="item.i=='3.0'" class="p-10px">
        <starPie class="w-100 h-100" :options="pieOptions" :data="pie"></starPie>
      </bi-wapper>
      <bi-wapper v-else-if="item.i=='3.1'" class="p-10px">
        <starChart class="w-100 h-100" :options="chartOptions3"></starChart>
      </bi-wapper>
      <bi-wapper v-else-if="item.i=='3.2'" class="p-10px">
        <starChart class="w-100 h-100" :options="chartOptions4"></starChart>
      </bi-wapper>
      <bi-wapper v-else class="p-10px">
        
      </bi-wapper>
    </grid-item>
  </grid-layout>
</template>

<script>
import VueGridLayout from 'vue-grid-layout';
import BiWapper from '../comp/biWapper.vue';
import BiKpi from '../comp/biKpi.vue';
import BiCircle from '../comp/biCircle.vue';
import BiLabel from '../comp/biLabel.vue';
import BiTable from '../comp/biTable.vue';
import BiList from '../comp/biList.vue';
export default {
  name:'',
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    BiWapper,
    BiKpi,
    BiCircle,
    BiLabel,
    BiTable,
    BiList
  },
    data() {
    return {
        rowHeight:108,
        colNum:100,
        editable:false,
        layout:[
            {"x":0,"y":0,"w":25,"h":3,"i":"1.0",title:'abc-0',pos:'1.1'},
            {"x":0,"y":3,"w":25,"h":3,"i":"1.1",title:'abc-0',pos:'1.1'},
            {"x":0,"y":6,"w":25,"h":3,"i":"1.2",title:'abc-0',pos:'1.1'},

            {"x":25,"y":0,"w":20,"h":2,"i":"2.0.1",title:'abc-0',pos:'1.2'},
            {"x":45,"y":0,"w":30,"h":2,"i":"2.0.2",title:'abc-0',pos:'1.2'},
            {"x":25,"y":2,"w":50,"h":4,"i":"2.1",title:'abc-0',pos:'1.3'},
            {"x":25,"y":6,"w":25,"h":3,"i":"2.2.1",title:'abc-0',pos:'1.3'},
            {"x":50,"y":6,"w":25,"h":3,"i":"2.2.2",title:'abc-0',pos:'1.3'},
            
            {"x":75,"y":0,"w":25,"h":3,"i":"3.0",title:'abc-0',pos:'1.1'},
            {"x":75,"y":3,"w":25,"h":3,"i":"3.1",title:'abc-0',pos:'1.1'},
            {"x":75,"y":6,"w":25,"h":3,"i":"3.2",title:'abc-0',pos:'1.1'},
        ],
        circles:[
            {name:'80%',value:80,color:'green'},
            {name:'40%',value:40,color:'red'},
            {name:'60%',value:60,color:'yellow'},
        ],
        pieOptions:{
          title:{
            text:'abc',
            textStyle:{
              color:'white'
            }
          },
          legend:{
            top:80,
            textStyle:{
              color:'white'
            }
          }
        },
        pie:[
          { value: 1048, name: "aaa" },
          { value: 735, name: "bbb" },
          { value: 580, name: "ccc" },
          { value: 484, name: "ddd" },
          { value: 300, name: "eee" },
        ],
        labels:[
            {name:'abc-0',value:80,},
            {name:'abc-1',value:40,},
            {name:'abc-2',value:60,},
            {name:'abc-2',value:70,},
        ],
        chartOptions1:{
          title:{
            text:'chartOptions1',
            textStyle:{
              color:'white'
            }
          },
          legend:{
            bottom:0,
            textStyle:{
              color:'white'
            }
          },
          xAxis:{
            axisLabel:{
              color:'white'
            },
            name:'x',
            data:["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
          },
          yAxis:{
            axisLabel:{
              color:'white'
            },
            name:'x',
          },
          series:[
            {
              name:'Email',
              type:'bar',
              data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
              name:'Union Ads',
              type:'bar',
              data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
              name:'Video Ads',
              type:'bar',
              data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
              name:'Direct',
              type:'bar',
              data:[320, 332, 301, 334, 390, 330, 320]
            }
          ]
        },
        chartOptions2:{
          title:{
            text:'chartOptions2',
            textStyle:{
              color:'white'
            }
          },
          legend:{
            bottom:0,
            textStyle:{
              color:'white'
            }
          },
          xAxis:{
            type:'value',
            axisLabel:{
              color:'white'
            },
            name:'x',
            data:["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
          },
          yAxis:{
            type:'category',
            axisLabel:{
              color:'white'
            },
            name:'x',
          },
          series:[
            {
              name:'Email',
              type:'bar',
              data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
              name:'Union Ads',
              type:'bar',
              data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
              name:'Video Ads',
              type:'bar',
              data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
              name:'Direct',
              type:'bar',
              data:[320, 332, 301, 334, 390, 330, 320]
            }
          ]
        },
        chartOptions3:{
          title:{
            text:'chartOptions3',
            textStyle:{
              color:'white'
            }
          },
          legend:{
            bottom:0,
            textStyle:{
              color:'white'
            }
          },
          xAxis:{
            axisLabel:{
              color:'white'
            },
            name:'x',
            data:["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
          },
          yAxis:{
            axisLabel:{
              color:'white'
            },
            name:'x',
          },
          series:[
            {
              name:'Email',
              type:'line',
              data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
              name:'Union Ads',
              type:'line',
              data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
              name:'Video Ads',
              type:'line',
              data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
              name:'Direct',
              type:'line',
              data:[320, 332, 301, 334, 390, 330, 320]
            }
          ]
        },
        chartOptions4:{
          title:{
            text:'chartOptions4',
            textStyle:{
              color:'white'
            }
          },
          legend:{
            bottom:0,
            textStyle:{
              color:'white'
            }
          },
          xAxis:{
            type:'value',
            axisLabel:{
              color:'white'
            },
            name:'x',
            data:["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
          },
          yAxis:{
            type:'category',
            axisLabel:{
              color:'white'
            },
            name:'x',
          },
          series:[
            {
              name:'Email',
              type:'bar',
              data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
              name:'Union Ads',
              type:'bar',
              data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
              name:'Video Ads',
              type:'bar',
              data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
              name:'Direct',
              type:'bar',
              data:[320, 332, 301, 334, 390, 330, 320]
            }
          ]
        },
        sandyOptions:{
          title:{
            text:'sandyOptions',
            textStyle:{
              color:'white'
            }
          },
          series: {
            type: 'sankey',
            layout: 'none',
            emphasis: {
              focus: 'adjacency'
            },
            nodeAlign: 'right',
            label:{
              color:'white'
            },
            data: [
              {name: 'a'},
              {name: 'b'},
              {name: 'a1'},
              {name: 'a2'},
              {name: 'b1'},
              {name: 'c'}
            ],
            links: [
              {source: 'a',target: 'a1',value: 5},
              {source: 'a',target: 'a2',value: 3},
              {source: 'b',target: 'b1',value: 8},
              {source: 'a',target: 'b1',value: 3},
              {source: 'b1',target: 'a1',value: 1},
              {source: 'b1',target: 'c',value: 2}
            ]
          } 
        },
        tableColumn:[
          { title: "姓名", dataIndex: "name", key: "name" },
          { title: "年龄", dataIndex: "age", key: "age" },
          { title: "地址", dataIndex: "address", key: "address" },
        ],
        tableData:[
          { name: "John Brown", age: 32, address: "New York No. 1 Lake Park" },
          { name: "Jim Green", age: 42, address: "London No. 1 Lake Park" },
          { name: "Joe Black", age: 32, address: "Sidney No. 1 Lake Park" },
          { name: "Jon Snow", age: 24, address: "Ottawa No. 2 Lake Park" },
          { name: "John Brown", age: 32, address: "New York No. 1 Lake Park" },
          { name: "Jim Green", age: 42, address: "London No. 1 Lake Park" },
          { name: "Joe Black", age: 32, address: "Sidney No. 1 Lake Park" },
          { name: "Jon Snow", age: 24, address: "Ottawa No. 2 Lake Park" },
        ],
        list:[
          "Ottawa No. 1 Lake Park",
          "Ottawa No. 2 Lake Park",
          "Ottawa No. 3 Lake Park",
          "Ottawa No. 4 Lake Park",
          "Ottawa No. 5 Lake Park",
          "Ottawa No. 6 Lake Park",
          "Ottawa No. 7 Lake Park",
          "Ottawa No. 8 Lake Park",
          "Ottawa No. 9 Lake Park",
          "Ottawa No. 10 Lake Park",
          "Ottawa No. 11 Lake Park",
          "Ottawa No. 12 Lake Park",
          "Ottawa No. 13 Lake Park",
          "Ottawa No. 14 Lake Park",
        ]
    };
  },
  props: {},
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style scoped>
.bi-layout {
  width: 100%;
  height:calc(100% - 6vh) !important;
  padding:5px;
}
.bi-kpi {
  width: 200px;
  height: 100px;
  font-size: 40px;
  position: relative;
  border-radius: 50%; /* 水平方向半径50px，垂直方向半径30px */
  overflow: hidden; /* 隐藏溢出容器的部分 */
  -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, 1));
}
.bi-empty-block {
  background-color: #1c264c;
}
</style>